<template>
  <div class="chart" ref="chart"></div>
</template>

<script>
	export default {
    name: 'BarChartTransverse',
    props: ['data'],
	  data() {
      return {
        barHeight:'',
        /*barData: {
          data: [
            {name:'广西',col1:10,col2:22,col3:33},
            {name:1,col1:10,col2:22,col3:33},
            {name:1,col1:10,col2:22,col3:33},
            {name:1,col1:10,col2:22,col3:33},
          ],
          legendShow:true,
          legendData:[
            {dim:'利润贡献率1',type:'bar',column:'col1'},
            {dim:'利润贡献率2',type:'bar',column:'col2'},
            {dim:'利润贡献率3',type:'line',column:'col3'},
          ],
          title:'',
          titleShow:true,
          unit: '-'
        }*/
      }
    },
    mounted() {
      this.drawChart()
    },
    watch: {
      'data.data': function(val) {
        this.drawChart()
      },
      deep: true
    },
    methods: {
      drawChart() {
        // 基于准备好的dom，初始化echarts实例
        this.myChart = this.$echarts.init(this.$el)
        // 绘制图表
        /*let xAxisData = this.data.data.map((item) => {
          return item.date
        })
        let dataValue = this.data.data.map((item) => {
          return item.value
        })*/

        let bar_data = [];
        this.data.data.forEach((item,index) => {
          bar_data.push(this.data.data[this.data.data.length-index-1]);
        })
        let yAxis_data = [];
        let series_data1 = [];
        let series_data2 = [];
        let series_data3 = [];
        bar_data.forEach(item=> {
          yAxis_data.push(item.name);
          series_data1.push(item.col1);
          series_data2.push(item.col2);
          series_data3.push(item.col3);
        })
        let legendData = [];
        this.data.legendData.forEach(item => {
          legendData.push(item.dim);
        })
        // this.barHeight = this.data.data.length * 50 +10 +'px';
        this.myChart.setOption({
          title: {
            show:this.data.titleShow,
            text: this.data.title,
            textStyle:{
              fontSize:14
            }
          },
          tooltip: {
            trigger: 'axis',
            show:false
          },
          legend: {
            show:false,
            data: legendData
          },
          grid: {
            top:10,
            left: 50,
            // right: '4%',
            // right: '4%',
            bottom: 20,
            // containLabel: true
          },
          xAxis: {
            type: 'value',
            // boundaryGap: [0, 0.01],
            axisTick:{
              show:false
            },
            axisLine:{
              lineStyle:{
                color:'#ffffff'
              }
            },
            splitLine:{
              show:false
            }
          },
          yAxis: {
            type: 'category',
            data: yAxis_data,
            axisTick:{
              show:false
            },
            axisLine:{
              lineStyle:{
                color:'#333',
                width:0
              },
            },
          },
          series: [
            {
              name: '',
              type: this.data.legendData[0].type,
              barWidth: '5px',
              itemStyle: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                  offset: 0,
                  color: '#FF3837'
                }, {
                  offset: 1,
                  color: '#FF9090'
                }]),
                barBorderRadius: 6,
              },
              data:series_data1,
            },
            {
              name: '',
              type: this.data.legendData[1].type,
              barWidth: '5px',
              itemStyle: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                  offset: 0,
                  color: '#58a9ee'
                }, {
                  offset: 1,
                  color: '#c3e3fe'
                }]),
                barBorderRadius: 6,
              },
              data: series_data2
            },
            {
              name: '',
              type: this.data.legendData[2].type,
              barWidth: '5px',
              itemStyle: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#FFB761'
                }, {
                  offset: 1,
                  color: '#FFB761'
                }]),
                barBorderRadius: 6,
              },
              data: series_data3,
              label:{
                show:true,
                textStyle:{
                  fontSize:12,
                  color:'#666666',
                },
                position:'right',
              }
            }
          ],
          /*series: [
            {
              type: 'bar',
              barWidth: '10px',
              itemStyle: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#FF3737'
                }, {
                  offset: 1,
                  color: '#FFADAD'
                }]),
                barBorderRadius: 6,
              },
              data: dataValue,
            },
          ]*/
        });
      }
    },
  }
</script>

<style lang="scss" scoped>
  .chart {
    width: 100%;
    height: 100%;
  }
</style>
